<template>
  <div class="box">
    <div class="header">
      <span class="iconfont icon-fanhui" @click="back()"></span>
      <div class="title">问题反馈</div>
    </div>
    <div class="main">
      <div class="input">
        <p>联系方式</p>
        <input type="text" placeholder="请输入手机号" class="ipt" />
      </div>
      <div class="text">
        <p>反馈内容</p>
        <textarea />
      </div>
    </div>
    <div class="bottom">
      <van-button
        color="linear-gradient(to bottom right, #f00, #fff)"
        round
        class="button"
        block
        @click="submit()"
        >提交反馈</van-button
      >
    </div>
  </div>
</template>

<script>
import textarea from "../../components/textarea.vue";
import "../../static/iconfont/font_g5b9ldx0nvj/iconfont.css";
export default {
  components: { textarea },
  methods: {
    back() {
      uni.navigateBack();
    },
    submit() {
     wx.switchTab({
        url: "/pages/my/index",
      });
    },
  },
};
</script>

<style lang='scss' scoped>
.box {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  .header {
    width: 100%;
    height: 200rpx;
    background: linear-gradient(90deg, #0272f0, #36a2fe);
    display: flex;
    align-items: center;
    position: relative;
    top:0;
    position:sticky;
    span {
      position: absolute;
      left: 40rpx;
      top: 50%;
      transform: translate(0, -50%);
      color: #fff;
    }
    .title {
      width: 100%;
      text-align: center;
      color: #fff;
    }
  }
  .main {
    width: 100%;
    flex: 1;
    background: #eee;
    .input {
      background: #fff;
      width: 100%;
      p {
        margin-left: 50rpx;
        color: #666666;
        font-size: 35rpx;
      }
      .ipt {
        margin-top: 20rpx;
        width: 80%;
        margin-left: 50rpx;
        border: none;
      }
    }
    .text {
      margin-top: 20rpx;
      background: #fff;
      width: 100%;
      p {
        margin-left: 50rpx;
        color: #666666;
        font-size: 35rpx;
      }
      .area {
        margin-top: 20rpx;
        width: 80%;
        height: 300rpx;
        margin-left: 50rpx;
        outline: none;
        border: 1rpx solid #666666;
      }
    }
  }
  .bottom {
    margin-top: 100rpx;
  }
}
</style>